import React, { useState } from 'react'

export default function StateTest() {
  console.log('StateTest')
  // 定义state
  /* 
  useState： 接收初始值参数， 返回值状态数据和更新函数的数组
    1. 第一次执行useState：React创建创建一个状态数据， 初始值就是参数值，同时定义一个更新状态数据的函数，最后返回状态数据和更新函数的数组
    2. 调用更新函数：更新内部的状态数据，并触发组件的更新， 也就重新执行组件函数
    3. 再次执行useState: 返回内部的状态数据和更新函数的数组
  更新函数setXxx的语法
    1. setXxx(newValue)
    2. setXxx(value => newValue)   value是内部保存的状态数据值， newValue指定的最新值
  */
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>点击次数： {count}</p>
      <button onClick={() => setCount(count+1)}>点击增加1</button>
      <button onClick={() => setCount(value => value + 2)}>点击增加2次</button>
    </div>
  )
}
